<template>
  <div>
    <div style="text-align: center;margin-top: 2%">
      <el-button @click="addAdmin()" style="font-size: 20px" type="primary">点击此处新增管理员</el-button>
    </div>

    <template style="margin-top: 2%">
      <el-table :data="pageInfo.list" style="width: 100%">
        <el-table-column label="" width="320">
        </el-table-column>
        <el-table-column label="管理员编号" width="240" prop="adminId" sortable>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{scope.row.adminId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理员名称" width="400">
          <template slot-scope="scope">
            <span>{{scope.row.adminName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="200" prop="state" sortable>
          <template slot-scope="scope">
            <span>禁用 </span>
            <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="enable"
                inactive-value="disable"
                @change="stateChange(scope.row)">
            </el-switch>
            <span> 启用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button  size="mini" type="primary" style="font-size: 16px"
                        @click="handleEdit(scope.row)">编辑</el-button>
            <el-button  size="mini" type="warning" style="font-size: 16px"
                        @click="initPwd(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"></div>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>

    <el-drawer title="新增/编辑管理员" :visible.sync="modify" :direction="'btt'">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30%">
        <el-form-item v-if="add===true" label="管理员编号" prop="adminId">
          <el-input v-model="ruleForm.adminId"
                    style="width: 30%"
                    oninput ="value=value.replace(/[^0-9.]/g,'')">
          </el-input>
        </el-form-item>
        <el-form-item label="管理员名称" prop="adminName">
          <el-input v-model="ruleForm.adminName" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data(){
    return{
      add: true,
      modify: false,
      superAdmin:{
        adminId: '',
        password:'',
        type: ''
      },
      currPage: 1,
      pageInfo:{},
      ruleForm:{
        adminId: '',
        adminName: '',
      },
      rules: {
        adminId: [
          { required: true, message: '请输入管理员id', trigger: 'blur' },
          { min: 1, max: 8, message: '请输入 1 到 8 个字符!', trigger: 'blur' }
        ],
        adminName: [
          { required: true, message: '请输入管理员名称', trigger: 'blur' },
          { min: 2, max: 20, message: '请输入 2 到 20 个字符!', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.updateUser();
    if(this.superAdmin.adminId == null || this.superAdmin.type == null)
      this.$router.push('/');
    else if(this.superAdmin.adminId !== '0' && this.superAdmin.type === 'admin')
      this.$router.push('/admin/main');
    else if(this.superAdmin.adminId === '0' && this.superAdmin.type === 'admin')
      this.getData();
    else
      this.$router.push('/');
  },
  methods:{
    submitForm(formName){ // 新增/编辑管理员
      this.updateUser();
      this.$refs[formName].validate((valid) => {//校验格式
        if (valid) {//格式校验通过
          let path;
          if(this.add)    //新增
            path = `http://localhost:8081/admin/addOneAdmin/${this.superAdmin.password}`;
          else            //修改
            path = `http://localhost:8081/admin/updateOneAdmin/${this.superAdmin.password}`;
          this.$ajax.post(path,this.ruleForm).then(res=>{
            if(res.data.status === 0){
              this.$message.success(res.data.message);
              this.modify = false;
            }
            else{
              this.$message.error(res.data.message);
            }
            this.getData();
          })
        }
      });
    },
    addAdmin(){//新增
      this.ruleForm.adminId = '';
      this.ruleForm.adminName = '';
      this.add = true;
      this.modify = true;
    },
    handleEdit(row){//修改
      this.ruleForm.adminId = row.adminId;
      this.ruleForm.adminName = row.adminName;
      this.add = false;
      this.modify = true;
    },
    getData(){//获取数据
      this.updateUser();
      let path = `http://localhost:8081/admin/getAdminList/${this.currPage}`;
      this.$ajax.post(path,this.superAdmin).then(res=>{
        this.pageInfo = res.data;
      })
    },
    stateChange(row){//修改启用状态
      this.updateUser();
      let path = `http://localhost:8081/admin/updateOneAdmin/${this.superAdmin.password}`;
      this.$ajax.post(path,row).then(res=>{
        if(res.data.status !== 0){//更新不成功
          this.$message.error(res.data.message);
          this.getData();//刷新数据
        }
      })
    },
    initPwd(row){//重置密码
      this.updateUser();
      this.$confirm('确认重置管理员“' + row.adminId + ' - '+ row.adminName + '“的登录密码?').then(()=>{
        let path = `http://localhost:8081/admin/adminPwdInit/${this.superAdmin.password}`;
        this.$ajax.post(path,row).then(res=>{
          if(res.data.status === 0){
            row.state = 'enable';//密码重置后状态会改为启用
            this.$message.success(res.data.message);
          }
          else{
            this.$message.error('密码重置失败!');
          }
        })
      }).catch(() => {
        this.$message('已取消重置密码!');
      });
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    updateUser(){//更新超级管理员信息
      this.superAdmin.adminId = JSON.parse(sessionStorage.getItem("id"))
      this.superAdmin.password = JSON.parse(sessionStorage.getItem("password"))
      this.superAdmin.type = JSON.parse(sessionStorage.getItem("type"))
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>